import 'package:album/utils/GlobalVariable.dart';
import 'package:flutter/material.dart';

class IndexPage extends StatefulWidget {
  const IndexPage({Key? key}) : super(key: key);

  @override
  createState() => IndexPageState();
}

class IndexPageState extends State<IndexPage> {
  /// 图片地址
  String imgURL = GlobalVariable().getImgUrl;

  /// Tag标签
  List tagList = ["推荐", "穿搭", "饮食", "住宿", "旅行"];

  /// Tag标签点击位置
  int onClickTag = 0;

  GlobalKey keyLeft = GlobalKey();
  GlobalKey keyRight = GlobalKey();

  /// 推荐列表
  List imgList = [
    "1%20(1).jpeg",
    "1%20(1).jpg",
    "1%20(2).jpeg",
    "1%20(3).jpeg",
    "1%20(4).jpeg",
    "1%20(5).jpeg",
    "1%20(6).jpeg",
  ];

  /// 列表标签
  List litterTag = [
    {"text": "度假游", "icon": "images/dujia.png"},
    {"text": "酒店住宿", "icon": "images/jiudianzhusu.png"},
    {"text": "地方美食", "icon": "images/meishi.png"},
    {"text": "接送服务", "icon": "images/jiesong.png"},
    {"text": "好物推荐", "icon": "images/tuijian.png"},
    {"text": "出行攻略", "icon": "images/gonlue.png"},
    {"text": "其它", "icon": "images/other.png"}
  ];

  List<String> leftFalls = [];
  List<String> rightFalls = [];

  /// 模拟数据
  List falls = [
    "1%20(6).jpeg",
    "1%20(2).jpeg",
    "1%20(7).jpeg",
    "1%20(1).jpeg",
    "1%20(7).jpeg",
    "1%20(7).jpeg",
    "1%20(3).jpeg",
    "1%20(7).jpeg",
    "1%20(6).jpeg",
    "1%20(7).jpeg",
    "1%20(7).jpeg",
    "1%20(8).jpeg",
    "1%20(7).jpeg",
    "1%20(7).jpeg",
    "1%20(7).jpeg",
    "1%20(11).jpeg",
    "1%20(4).jpeg",
    "1%20(3).jpeg",
    "1%20(7).jpeg",
    "1%20(5).jpeg",
    "1%20(7).jpeg",
  ];

  // BaiduLocation _loationResult = BaiduLocation();
  // final LocationFlutterPlugin _myLocPlugin = LocationFlutterPlugin();
  // final GPS _gps = GPS();
  ScrollController controller = ScrollController();
  WidgetsBinding widgetsBinding = WidgetsBinding.instance;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    ///单次定位时如果是安卓可以在内部进行判断调用连续定位
    // if (Platform.isIOS) {
    //   ///接受定位回调
    //   _myLocPlugin.singleLocationCallback(callback: (BaiduLocation result) {
    //     setState(() {
    //       _loationResult = result;
    //       // locationFinish();
    //     });
    //   });
    // } else if (Platform.isAndroid) {
    //   ///接受定位回调
    //   _myLocPlugin.seriesLocationCallback(callback: (BaiduLocation result) {
    //     setState(() {
    //       _loationResult = result;
    //       // locationFinish();
    //       _myLocPlugin.stopLocation();
    //     });
    //   });
    // }
    // if (falls.isNotEmpty) {
    //   setState(() {
    //     leftFalls.add(falls[0]);
    //   });
    // }
    // controller.addListener(() {
    //   print(
    //     "${controller.positions.elementAt(0).pixels}|${controller.positions.elementAt(1).pixels}",
    //   );
    //   // if (controller.position.pixels >
    //   //     controller.position.maxScrollExtent - 40) {
    //   //   setState(() {
    //   //     controller.add("value");
    //   //   });
    //   // }
    // });
  }

  @override
  void dispose() {
    controller.dispose();
    // TODO: implement dispose
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    widgetsBinding.addPostFrameCallback((callback) {
      if (falls.isNotEmpty) {
        double? left = keyLeft.currentContext?.size?.height;
        double? right = keyRight.currentContext?.size?.height;
        if (left == null) {
          setState(() {
            leftFalls.add(falls[0]);
          });
          falls.removeAt(0);
        } else if (left > right!) {
          setState(() {
            rightFalls.add(falls[0]);
          });
          falls.removeAt(0);
        } else if (left < right) {
          setState(() {
            leftFalls.add(falls[0]);
          });
          falls.removeAt(0);
        }
        print("$left||$right");
        // else if(right==null){
        //   print("object");
        //   setState(() {
        //     rightFalls.add(falls[0]);
        //   });
        //   falls.removeAt(0);
        // }

        //
        //     print(falls);
        //   } else{
        //     setState(() {
        //       rightFalls = falls[0];
        //     });
        //     falls.removeAt(0);
        //     print(falls);
        //   }
      }
    });

    // TODO: implement build
    return SingleChildScrollView(
      child: ConstrainedBox(
        constraints:
            BoxConstraints(minHeight: MediaQuery.of(context).size.height - 135),
        child: Container(
          width: double.infinity,
          padding: const EdgeInsets.symmetric(horizontal: 10),
          color: const Color(0x27B2B2B2),
          child: Column(
            children: [
              const SizedBox(
                height: 20,
              ),
              Row(children: const [
                Text(
                  "Hi~早上好！",
                  style: TextStyle(
                    fontSize: 20,
                  ),
                ),
              ]),
              const SizedBox(
                height: 15,
              ),
              Container(
                height: 19,
                padding: const EdgeInsets.only(left: 15),
                child: ListView.builder(
                  scrollDirection: Axis.horizontal,
                  itemCount: tagList.length,
                  itemBuilder: (context, index) {
                    return Padding(
                      padding: const EdgeInsets.only(right: 10),
                      child: GestureDetector(
                        onTap: () {
                          setState(() {
                            onClickTag = index;
                          });
                        },
                        child: Column(
                          children: [
                            Text(
                              tagList[index],
                              style: TextStyle(
                                height: 1,
                                fontSize: index == onClickTag ? 17 : null,
                                color: index == onClickTag
                                    ? Colors.black
                                    : Colors.black54,
                              ),
                            ),
                            if (index == onClickTag)
                              Container(
                                width: 10,
                                height: 2,
                                color: Colors.black,
                              ),
                          ],
                        ),
                      ),
                    );
                  },
                ),
              ),
              const SizedBox(
                height: 20,
              ),
              SizedBox(
                width: double.infinity,
                height: 170,
                child: ListView.builder(
                    // shrinkWrap: true,
                    scrollDirection: Axis.horizontal,
                    itemCount: imgList.length,
                    // controller: scrollController,
                    itemBuilder: (context, index) {
                      return Stack(
                        children: [
                          Padding(
                            padding: const EdgeInsets.only(right: 15),
                            child: ClipRRect(
                              borderRadius: BorderRadius.circular(10),
                              child: Image.network(
                                imgURL + imgList[index],
                                width: 130,
                                height: 170,
                                fit: BoxFit.cover,
                              ),
                            ),
                          ),
                          Positioned(
                            left: 10,
                            bottom: 10,
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.end,
                              children: const [
                                Text(
                                  "昆仑山",
                                  style: TextStyle(color: Colors.white),
                                ),
                                Text(
                                  "中国•广东",
                                  style: TextStyle(color: Colors.white),
                                ),
                              ],
                            ),
                          ),
                        ],
                      );
                    }),
              ),
              const SizedBox(
                height: 20,
              ),
              ClipRRect(
                borderRadius: BorderRadius.circular(5),
                child: Container(
                  padding: const EdgeInsets.all(5),
                  width: double.infinity,
                  height: 51,
                  color: const Color(0x1A6B6B6B),
                  child: ListView.builder(
                    scrollDirection: Axis.horizontal,
                    itemCount: litterTag.length,
                    // controller: scrollController,
                    itemBuilder: (context, index) {
                      return Padding(
                        padding: const EdgeInsets.only(right: 10),
                        child: Tab(
                          icon: Image.asset(
                            litterTag[index]["icon"],
                            width: 25,
                            height: 25,
                          ),
                          iconMargin: const EdgeInsets.only(bottom: 4),
                          child: Text(
                            litterTag[index]["text"],
                            style: const TextStyle(
                                fontSize: 12,
                                height: 1,
                                color: Color(0xFF888888),
                                fontWeight: FontWeight.w500),
                          ),
                        ),
                      );
                    },
                  ),
                ),
              ),
              const SizedBox(
                height: 20,
              ),
              Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  if (leftFalls.isNotEmpty)
                    Expanded(
                      key: keyLeft,
                      child: ListView.builder(
                        shrinkWrap: true,
                        // physics: const NeverScrollableScrollPhysics(),
                        controller: controller,
                        itemCount: leftFalls.length,
                        itemBuilder: (context, idx) {
                          return Stack(
                            children: [
                              Padding(
                                padding:
                                    const EdgeInsets.only(right: 5, bottom: 10),
                                child: ClipRRect(
                                  borderRadius: BorderRadius.circular(10),
                                  child: Image.network(
                                    "$imgURL${leftFalls[idx]}",
                                    fit: BoxFit.fitWidth,
                                  ),
                                ),
                              ),
                            ],
                          );
                        },
                      ),
                    ),
                  if (leftFalls.isEmpty)
                    Expanded(
                      child: Image.network(
                        "${imgURL}empty.jpeg",
                        fit: BoxFit.fill,
                      ),
                    ),
                  if (rightFalls.isNotEmpty || leftFalls.isNotEmpty)
                    Expanded(
                      key: keyRight,
                      child: ListView.builder(
                        shrinkWrap: true,
                        // physics: const NeverScrollableScrollPhysics(),
                        controller: controller,
                        itemCount: rightFalls.length,
                        itemBuilder: (context, idx) {
                          return Stack(
                            children: [
                              Padding(
                                padding:
                                    const EdgeInsets.only(left: 5, bottom: 10),
                                child: ClipRRect(
                                  borderRadius: BorderRadius.circular(10),
                                  child: Image.network(
                                    "$imgURL${rightFalls[idx]}",
                                    fit: BoxFit.fitWidth,
                                  ),
                                ),
                              ),
                            ],
                          );
                        },
                      ),
                    ),
                ],
              ),

              ElevatedButton(
                onPressed: () {
                  // print(globalKey.currentContext?.size?.height);
                  setState(() {
                    leftFalls.add(falls[0]);
                  });
                },
                child: const Text("globalKey"),
              ),
              // for (int i = 0; i < 60; i++) Text("data$i"),
            ],
          ),
        ),
      ),
    );
  }
}
